<template>
  <div>
    <h3>Slot插槽</h3>
    <div>
      <Child :persons="persons">
        <h3>默认插槽</h3>
        <template #one>
          <h3>具名插槽</h3>
          <div>我是具名插槽</div>
        </template>
        <template #two="{ item }">
          <div>{{ item.name }}{{ item.age }}</div>
        </template>
      </Child>
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "Slot",
  components: { Child },
  data() {
    return {
      persons: [
        { id: "001", name: "李博", age: 30 },
        { id: "002", name: "red青", age: 14 },
        { id: "003", name: "(个_个)", age: 24 },
        { id: "004", name: "lucy", age: 55 },
        { id: "005", name: "lily", age: 4 },
        { id: "006", name: "liming", age: 19 },
      ],
    };
  },
  mounted() {
  // 当前组件树的根VUe实例 类似事件总线
    console.log(this.$root);
  },
};
</script>

<style>
</style>